CSSの基本(12)−枠線を指定する
今回のホームページ作成講座では、CSSで枠線を指定する方法を紹介します。枠線を描画する場合は、borderプロパティを利用し、枠線の太さ、色、線種を指定します。ちょっとした記述を行うだけで効果的な演出を行えるのがborderプロパティの魅力です。

→ CSSで枠線を指定する
 
画像や文章などを枠線で囲む場合は、borderプロパティを利用し、その値に線の「太さ」「色」「線種」を指定します。各値は半角スペースで区切って記述してください。線の「太さ」はピクセル単位で指定するのが一般的です。線の「色」は、RGBの16進数で指定します。最後に「線種」ですが、これは以下の9種類のいずれかを指定します。なお、「太さ」「色」「線種」を記述する順番に決まりはありません。

solid ……… 実線
double ……… 二重線
dashed ……… 点線
dotted ……… 丸点線
inset ……… 立体枠線(凹型の立体枠)
outset ……… 立体枠線(凸型の立体枠)
groove ……… 立体枠線(先端が平面の立体枠)
ridge ……… 立体枠線(先端が尖った立体枠)
none ……… 線なし
<DIV style="border:6px #FF0000 solid">
    :
</DIV>
サンプルページ


→ 画像を枠線で囲む
 
続いては、具体的なサンプルを示して枠線の利用方法を紹介します。以下は、画像を枠線で囲った様子です。この例では、枠線を8ピクセル、白色、実線とするため、CSSの記述は「border:8px #FFFFFF solid」となります。
<IMG src="tree.jpg" style="border:8px #FFFFFF solid"> サンプルページ


→ 文字を枠線で囲む
 
文章を枠線で囲む場合は、その文章をDIVタグで挟み、DIVタグに対して枠線を指定するのが一般的です。以下の例では、クラス名"column"のDIVタグに対して5ピクセル、緑色、丸点線の枠線を指定しています。そのほか、DIVタグの横幅、文字色、文字揃え、背景色もCSSで指定しています。
<STYLE type="text/css">
    :
DIV.column{
    width:300px;
    color:#FFFFFF;
    text-align:left;
    background-color:#669900;
    border:5px #669900 dotted;
}
</STYLE>
    :
<BODY>
    :
<DIV class="column">
CSSでは、borderプロパティを利用して枠線を指定します。borderプロパティの値には、枠線の太さ、色、線の種類の3つを指定します。さまざまな線種が用意されているので、最適なものを選択するとよいでしょう。
</DIV>

</BODY>
    :
サンプルページ


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze